<template>
  <div>
    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <!--    分类信息-->
      <el-col :span="8">
          <el-card style="height: 780px; overflow: auto">
          <div slot="header" class="search-header">
            <div class="show_title">案卷类别：</div>
            <el-input
              v-model="filterText"
              placeholder="搜索分类"
              clearable
              @keyup.enter.native="searchClass"
              class="my_input"
            />
<!--            <div class="button-group">-->
<!--              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchClass">搜索</el-button>-->
<!--            </div>-->
          </div>
          <el-tree
            v-if="treemainList.length > 0"
            class="filter-tree"
            :data="treemainList"
            :props="{ label: 'indexName', children: 'children' }"
            :default-expand-all="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
            style="margin-top: 10px"
          ></el-tree>
        </el-card>
      </el-col>
      <!--    案卷信息-->
      <el-col :span="8">
        <volume-list ref="volumeList" :topNode="volumeQueryParams" @selectVolume="selectVolume"
                     @resetVolume="resetVolume"></volume-list>
      </el-col>
      <!--    文件信息-->
      <el-col :span="8">
        <file-list ref="fileList" :selectedOneVolume="selectInfo.selectedVolume" @selectFile="selectFile"></file-list>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-left: 5px; margin-top: 5px; margin-right: 5px">
      <el-card>
        <el-row>
          <el-col :span="24" v-show="selectInfo.currentInfo === 'volume'">
            <volume-info :volume-info="selectInfo.selectedVolume"/>
          </el-col>
          <el-col :span="24" v-show="selectInfo.currentInfo === 'file'">
            <file-info :file-info="selectInfo.selectedFile"/>
          </el-col>
          <el-col :span="24" v-show="selectInfo.currentInfo === ''">
            <el-empty description="无案卷信息"></el-empty>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </div>
</template>

<script>
  import VolumeInfo from "@/views/system/search/volumeInfo";
  import FileInfo from "@/views/system/search/fileInfo";
  import {listTreemain} from "@/api/system/treemain";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import VolumeList from "@/views/system/search/volumelist.vue";
  import FileList from "@/views/system/search/filelist.vue";

  export default {
    components: {
      VolumeList,
      FileList,
      VolumeInfo,
      FileInfo,
    },
    data() {
      return {
        // 类别表格数据
        treemainList: [],
        // 查询参数
        queryParams: {
          parentNo: null,
          archiveCtgName: null,
        },
        // 搜索关键字
        filterText: "",
        selectInfo: {
          selectedEng: null,
          selectedVolume: null,
          selectedFile: null,
          currentInfo: "",
        },
        volumeQueryParams: {
          topnode: [],
          vname: null,
        },
      };
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
    },
    created() {
      this.getList();
    },
    methods: {
      searchClass() {},
      // 查询档案类别列表
      getList() {
        this.loading = true;
        listTreemain(this.queryParams).then(response => {
          this.treemainList = this.handleTree(response.data, "indexId", "parentId");
          this.loading = false;
        });
      },
      // 过滤节点
      filterNode(value, data) {
        if (!value || !data.indexName) return true;
        return data.indexName.indexOf(value) !== -1;
      },
      // 节点点击事件处理
      handleNodeClick(data) {
        // 递归查找所有最小类别节点
        const nodesAndChildren = this.findNodesAndChildren(data);
        // 处理最小类别节点列表，例如打印或进行其他操作
        if (nodesAndChildren.length === 1) {
          this.volumeQueryParams.topnode = nodesAndChildren;
          this.selectInfo.currentInfo = "";
          this.$refs.fileList.fileList = [];
        }
      },
      // 递归查找当前节点及其所有子节点
      findNodesAndChildren(node, result = []) {
        // 将当前节点加入结果数组
        result.push(node.id);
        if (node.children && node.children.length > 0) {
          // 如果当前节点有子节点，继续递归查找子节点
          for (const child of node.children) {
            this.findNodesAndChildren(child, result);
          }
        }
        return result;
      },

      //案卷重置选择
      resetVolume() {
        this.selectInfo.currentInfo = "";
        this.$refs.fileList.fileTotal = 0;
        this.$refs.fileList.fileList = [];
      },
      //选中案卷
      selectVolume(volume) {
        this.selectInfo.selectedVolume = volume;
        this.selectInfo.currentInfo = "volume";
      },
      //选中文件
      selectFile(file) {
        this.selectInfo.selectedFile = file;
        this.selectInfo.currentInfo = "file";
      },
    },
  };
</script>

<style>
  .search-header {
    display: flex;
    align-items: center;
  }

  .show_title {
    font-weight: bold;
    font-size: 20px;
    color: rgb(26, 115, 198);
  }

  .my_input {
    margin-left: auto;
    width: 37%;
  }

  .button-group {
    display: flex;
    align-items: center;
    margin-left: 10px;
  }

  .engs-container {
    height: 600px;
    overflow-y: auto;
  }

  .eng-row {
    flex-basis: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .eng-row:hover {
    cursor: pointer;
    background-color: #e5f3ff;
  }

  .pagination-container {
    margin-top: 10px;
  }

  .folder-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    background-size: cover;
  }

  .folder-name {
    flex-grow: 1;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .volume-folder-icon {
    background-image: url("~@/assets/icons/folder/volume-icon.png");
  }

  .file-folder-icon {
    background-image: url("~@/assets/icons/folder/file-icon.png");
  }

  /* 选中状态的样式 */
  .selected {
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);*/
    background-color: #cce8ff;
  }
</style>
